<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card" style="width: 80%; margin-left:auto;
  margin-right:auto;">
          <div slot="header">
            <span class="text">班级作品</span>
            <span class="text">{{"作品数："+this.page1.totalSize}}</span>
<!--            <el-button style="float: right; padding: 3px 0" type="text" plain @click="dialogFormVisible1 = true">上传班级作品</el-button>-->
            <!--选择上传班级作品-->
<!--            <el-dialog-->
<!--              title="上传班级作品"-->
<!--              :visible.sync="dialogFormVisible1"-->
<!--              width="50%"-->
<!--            >-->
<!--              <el-form ref="ruleForm1" :model="ruleForm1" :rules="rules1" label-width="100px" class="demo-ruleForm" style="width: 500px " label-position="left">-->
<!--                <el-form-item label="班级" prop="class">-->
<!--                  <el-select v-model.trim="ruleForm1.classid" @change="getStudentList">-->
<!--                    <el-option-->
<!--                      v-for="item in classOptions"-->
<!--                      :key="item.cid"-->
<!--                      :label="item.className"-->
<!--                      :value="item.cid"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="学生" prop="student">-->
<!--                  <el-select v-model.trim="ruleForm1.sid">-->
<!--                    <el-option-->
<!--                      v-for="it in studentOptions"-->
<!--                      :key="it.sid"-->
<!--                      :label="it.childName"-->
<!--                      :value="it.sid"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="等级" prop="grade">-->
<!--                  <el-select v-model.trim="ruleForm1.grade">-->
<!--                    <el-option-->
<!--                      v-for="it in gradeOptions"-->
<!--                      :key="it.value"-->
<!--                      :label="it.label"-->
<!--                      :value="it.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="文件" prop="file">-->
<!--                  <el-upload-->
<!--                    ref="upload"-->
<!--                    class="upload-demo"-->
<!--                    action=""-->
<!--                    limit="1"-->
<!--                    :http-request="uploadClassWorks"-->
<!--                    :on-remove="handleRemove"-->
<!--                    :on-change="fileChange"-->
<!--                    :before-upload="beforeUpload"-->
<!--                    :file-list="fileList"-->
<!--                    :auto-upload="false"-->
<!--                  >-->
<!--                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
<!--                  </el-upload>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--              <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible1 = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="submitUpload">上 传</el-button>-->
<!--              </span>-->
<!--            </el-dialog>-->
          </div>
          <div>
            <el-table :data="workslist" border style="width: 100%">
              <el-table-column prop="child_name" label="学生名" width="210" />
              <el-table-column prop="grade" label="等级" width="205" />
              <el-table-column prop="type" label="类型" width="204" />
              <el-table-column label="内容">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.type==='照片'" style="width: 200px;height: 100px" :src="baseUrl+scope.row.url"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="text" @click="showChangeGrade(scope.row.wid, scope.row.grade)">修改等级</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              title="修改作品等级"
              :visible.sync="dialogFormVisible"
              width="50%">
              <div style="padding-left: 10%">
                <template>
                  <el-radio v-model="gradeOp" label="1">优秀</el-radio>
                  <el-radio v-model="gradeOp" label="2">良好</el-radio>
                  <el-radio v-model="gradeOp" label="3">中等</el-radio>
                  <el-radio v-model="gradeOp" label="4">及格</el-radio>
                  <el-radio v-model="gradeOp" label="5">不及格</el-radio>
                  <el-button type="primary" @click="changeGrade">确认修改</el-button>
                </template>
              </div>
            </el-dialog>
<!--            <el-pagination-->
<!--              :page-size="page1.pageSize1"-->
<!--              layout="prev, pager, next, jumper"-->
<!--              :total="page1.totalSize1"-->
<!--              :current-page="page1.pageNum1"-->
<!--              style="float:right;padding: 20px 10px 20px 10px"-->
<!--              @current-change="handleCurrentChange"-->
<!--            />-->
            <el-pagination
              :hide-on-single-page="true"
              :page-size="page1.pageSize"
              :current-page="page1.pageNum"
              :total="page1.totalSize"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>

      </el-main>
    </el-container>
  </div>

</template>

<script>
import { getWork, updateWorkGrade } from '../../../api/works'
import { getTeacherClass } from '../../../api/class'
import { getStudentList } from '../../../api/student'

export default {
  name: 'Works',
  data() {
    return {
      baseUrl: this.global.picBaseUrl,
      wid: '',
      dialogFormVisible: false,
      fileList: [],
      gradeOp: 4,
      studentOptions: [],
      classOptions: [],
      page1: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      cid: [],
      // dialogFormVisible1: false,
      workslist: [],
      worksupdate: {
        cid: '',
        sid: '',
        grade: 0,
        type: 0,
        url: '',
        wid: '',
        isOnHomePage: false
      },
      gradeOptions: [],
      ruleForm1: {
        classid: '',
        cid: '',
        grade: 4
      },
      // rules1: {
      //   class: [
      //     { required: true, message: '请选择班级', trigger: 'blur' }
      //   ],
      //   student: [
      //     { required: true, message: '请选择学生', trigger: 'blur' }
      //   ]
      // }
    }
  },
  created() {
    // this.getTeacherClassList()
    this.getCourseList()
  },
  methods: {
    // 获取教师任课课程
    getCourseList() {
      getTeacherClass()
        .then(res => {
          for ( var i = 0; i < res.data.length; i++) {
            this.cid.push(res.data[i].cid)
          }
          this.getWorkList()
        }).catch( err => {
          console.log('error')
        })
    },
    // 显示修改等级页面
    showChangeGrade(wid, grade) {
      this.dialogFormVisible = true
      this.wid = wid
      console.log('grade', grade)
      switch (grade) {
        case '未设置':
          this.gradeOp = 0;
          break;
        case '优秀':
          this.gradeOp = 1;
          break;
        case '良好':
          this.gradeOp = 2;
          break;
        case '中等':
          this.gradeOp = 3;
          break;
        case '及格':
          this.gradeOp = 4;
          break;
        case '不及格':
          this.gradeOp = 5;
          break;
      }
      console.log('gradeop', this.gradeOp)
    },
    changeGrade() {
      console.log('grade', this.gradeOp)
      updateWorkGrade(this.wid, { grade: this.gradeOp })
        .then(res => {
          this.$message.success('修改作品等级成功！')
          this.getWorkList()
          this.dialogFormVisible = false
        })
    },
    handleCurrentChange(val) {
      this.page1.pageNum = val
      this.getWorkList()
    },
    // 获取作品列表
    getWorkList() {
      // var arr = JSON.stringify(this.cid)
      console.log('cid0', this.cid)
      getWork({
        // cid: this.cid,
        cid: '6307d231a8d811eaac5f00163e0b8ffd',
        pageNum: this.page1.pageNum,
        pageSize: this.page1.pageSize
      }).then(res => {
        this.workslist = res.data.list
        this.page1 = res.data.page
        console.log('res', res.data.list)
        for (var i = 0; i < this.workslist.length; i++) {
          switch (this.workslist[i].type) {
            case 1:
              this.workslist[i].type = "音频";
              break;
            case 2:
              this.workslist[i].type = "视频";
              break;
            case 3:
              this.workslist[i].type = "照片";
              break;
          }
          switch (this.workslist[i].grade) {
            case 0:
              this.workslist[i].grade = "未设置";
              break;
            case 1:
              this.workslist[i].grade = "优秀";
              break;
            case 2:
              this.workslist[i].grade = "良好";
              break;
            case 3:
              this.workslist[i].grade = "中等";
              break;
            case 4:
              this.workslist[i].grade = "及格";
              break;
            case 5:
              this.workslist[i].grade = "不及格";
              break;
          }
        }
      })
        .catch(err => {
          this.$message.error('请求作品列表失败！')
        })

    }
    // 获取某班幼儿信息
    // getStudentList() {
    //   console.log('cid', this.ruleForm1.classid)
    //   getStudentListByClass(
    //     this.ruleForm1.classid
    //   ).then(res => {
    //     this.studentOptions = res.data.list
    //     console.log('list', this.studentOptions)
    //     this.$message.success('请求学生列表成功！')
    //   })
    //     .catch(err => {
    //       this.$message.error('请求学生列表失败！')
    //     })
    // },
    // 获取任课班级列表
    // getTeacherClassList() {
    //   getTeacherClass().then(res => {
    //     this.classOptions = res.data
    //     console.log('data',res.data)
    //   }).then(res => {
    //     this.$message.success('请求班级列表成功！')
    //   })
    //     .catch(err => {
    //       this.$message.error('请求教师任课班级列表失败！')
    //     })
    // },
    // fileChange(file, fileList) {
    //   this.fileList = fileList
    // },
    // submitUpload() {
    //   this.$refs.upload.submit()
    // },
    // // 班级作品上传
    // uploadClassWorks(param) {
    //   const formDate = new window.FormData()
    //   const fileObj = param.file
    //   formDate.append('file', fileObj)
    //   uploadFile(formDate).then(res => {
    //     console.log('message1', res.data)
    //     this.worksupdate.url = res.data
    //     console.log('work', this.worksupdate)
    //     uploadWorks({
    //       // work: this.worksupdate
    //       cid: this.worksupdate.cid,
    //       sid: this.worksupdate.sid,
    //       grade: this.worksupdate.grade,
    //       type: this.worksupdate.type,
    //       url: this.worksupdate.url,
    //       wid: this.worksupdate.wid,
    //       isOnHomePage: this.worksupdate.isOnHomePage
    //     }).then(res => {
    //       console.log('message2', res)
    //       this.$message.success('上传作品成功！')
    //       this.dialogFormVisible1 = false
    //       this.getWorkList()
    //     }).catch(err => {
    //       console.log('err1', err)
    //       this.$message.error('上传作品失败！')
    //     })
    //   }).catch(err => {
    //     console.log('err2', err)
    //     this.$message.error('上传作品失败！')
    //   })
    // },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList)
    // },
    // // 上传文件前处理
    // beforeUpload(file) {
    //   console.log('file', file)
    //   if (!file) {
    //     this.$message.warning('请选择文件！')
    //     return false
    //   }
    //   this.worksupdate.grade = this.ruleForm1.grade
    //   // eslint-disable-next-line eqeqeq
    //   if (file.type.indexOf('image') != -1) {
    //     this.worksupdate.type = 3
    //     // eslint-disable-next-line eqeqeq
    //   } else if (file.type.indexOf('video') != -1) {
    //     this.worksupdate.type = 2
    //     // eslint-disable-next-line eqeqeq
    //   } else if (file.type.indexOf('audio') != -1) {
    //     this.worksupdate.type = 1
    //   } else {
    //     this.$message.warning('暂不支持该文件类型上传')
    //     return false
    //   }
    //   this.worksupdate.sid = this.ruleForm1.sid
    // }
  }
}
</script>

<style scoped>

</style>
